<template>
  <div>
    <div class="sub-task-list-title">
      <span>子任务</span
      ><span
        >{{ list.filter((obj) => obj.finished).length }}/{{ list.length }}</span
      >
      <div>
        <el-input
          size="small"
          v-model="taskTitle"
          @keypress.enter.native.exact="newTesk"
          placeholder="请输入子任务标题，回车或点击右侧按钮可添加子任务"
        >
          <el-button slot="append" icon="iconfont icon-task" @click="newTesk" />
        </el-input>
      </div>
    </div>
    <template v-if="list">
      <div class="sub-task-list" v-if="list.length > 0">
        <div
          class="sub-task-item"
          :style="item.finished ? { opacity: 0.3 } : {}"
          v-for="(item, i) in list"
          :key="i"
        >
          <div class="sub-task-item-done">
            <el-checkbox
              :checked="item.finished"
              @change="setFinished(i, item)"
            />
          </div>
          <div class="sub-task-item-title" @click="$emit('itemClick', item)">
            <span
              v-html="item.title"
              :style="item.finished ? { textDecoration: 'line-through' } : {}"
            ></span>
          </div>
          <div class="sub-task-item-more">
            <span>{{ getTime(item.time) }}</span>
            <span>{{ item.executorName }}</span>
            <i
              class="el-icon-close"
              @click="$emit('itemDelete', item)"
              v-if="!item.leader"
            />
            <el-tooltip :content="item.leader.name" v-else>
              <i class="el-icon-s-custom" />
            </el-tooltip>
          </div>
        </div>
        <div class="sub-task-add"></div>
      </div>
    </template>
  </div>
</template>

<script>
import { DateDiff } from "@util/dateUtil.js";
export default {
  model: {
    prop: "list",
    methods: ["setFinished", "itemClick", "itemDelete"],
  },
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user")),
      taskTitle: "",
    };
  },
  methods: {
    newTesk(e) {
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
      const item = {
          id: "",
          title: this.taskTitle,
          leader: "",
          executor: this.user.id,
          executorName: this.user.name,
          finished: false,
          time: new Date(),
          priority: "4",
          remarks: "",
          tags: [],
          type: "todo",
        }
      if (this.taskTitle != "") {
        let arr = this.list;
        arr.unshift(item);
        this.taskTitle = "";
        this.$emit("input", arr);
      }else{
        this.$emit('itemClick', item)
      }
    },
    setFinished(i, item) {
      this.$emit("setFinished", item);
    },
    getTime(time) {
      const now = new Date();
      const diff = DateDiff(now, time);
      if (diff == 0) {
        if (now.getDate() - time.getDate() == 1) {
          return "昨天";
        } else {
          return this.$moment(time).format("HH:mm");
        }
      } else if (diff == 1) {
        if (now.getDate() - time.getDate() == 2) {
          return "前天";
        } else {
          return "昨天";
        }
      } else if (diff == 2) {
        if (now.getDate() - time.getDate() == 2) {
          return "更早";
        } else {
          return "前天";
        }
      } else if (diff > 2) {
        return "更早";
      } else if (diff < 1) {
        const d = Math.abs(diff);
        if (d > 30 && d < 365) {
          return parseInt(d / 30) + "月后";
        } else if (d > 365) {
          return parseInt(d / 365) + "年后";
        } else {
          return d + "天后";
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.sub-task-list {
  padding: 10px;
  border: #ececec solid 1px;
  border-radius: 5px;
}
.sub-task-list-title {
  display: flex;
  span {
    justify-content: start;
    width: 80px;
    flex: 0 0 80px;
  }
  div {
    justify-content: end;
    width: 100%;
  }
}
.sub-task-item {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.sub-task-item:hover {
  i {
    opacity: 1;
  }
}
.sub-task-item-done {
  width: 30px;
  flex: 0 0 30px;
  justify-content: start;
  padding-left: 10px;
}
.sub-task-item-title {
  font-size: 14px;
  width: 100%;
  justify-content: center;
  cursor: pointer;
}
.sub-task-item-more {
  justify-content: end;
  text-align: right;
  width: 180px;
  flex: 0 0 180px;
  span {
    padding: 2px 10px;
    margin: 0 5px;
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
    background-color: #aaa;
  }
  i {
    cursor: pointer;
    margin-left: 5px;
    color: #409eff;
    opacity: 0;
  }
}
</style>
